<template>
    <j-modal title="文件分类管理"
             width="800px"
             :visible.sync="visible"
             :afterClose="handleClose">
        <a-spin :spinning="loading">
            <a-tree :tree-data="treeData"
                    :expandedKeys.sync="expandedKeys"
                    :selectedKeys.sync='selectedKeys'
                    :replaceFields="{children:'crdFileBliList',key:'id',title:'fileName'}"
                    @select="select">
                <template slot="title" slot-scope="scope">
                    <template v-if="scope.isEdit || scope.isNew">
                        <a-input v-model="scope.dataRef.fileName"></a-input>
                        <a-icon type="save" title="保存" @click.stop="update(scope)"/>
                        <a-icon type="close-circle" title="取消" @click.stop="cancel(scope)"/>
                    </template>
                    <div v-else class="item">
                        <span>{{scope.fileName}}</span>
                        <span class="icons">
              <a-icon type="edit" title="修改" @click.stop="edit(scope)"/>
              <a-popconfirm title="确定删除这个分类吗?"
                            @confirm="deleteItem(scope)">
                <a-icon type="delete" title="删除" @click.stop/>
              </a-popconfirm>
            </span>
                    </div>
                </template>
            </a-tree>
        </a-spin>
        <div slot="footer" class="footer">
            <a-button type="primary" icon="plus" @click="addFileClassify" title="添加子分类">新建</a-button>
        </div>
    </j-modal>
</template>

<script>
    import {getAction} from "@/api/manage";
    import {postAction} from "@/api/manage";

    export default {
        name: "FileClassifyModal",
        data() {
            this.changed = false;
            return {
                visible: false,
                loading: false,
                treeData: [],
                operateItem: null,
                expandedKeys: [],
                selectedKeys: []
            }
        },
        methods: {
            show() {
                this.visible = true;
                this.queryFileClassify();
            },
            select(selectedKeys, e) {
                if (e.selected) {
                    const itemData = e.selectedNodes[0].data.props.dataRef;
                    if (itemData.isNew) {
                        return;
                    }
                    this.operateItem = e.selectedNodes[0].data.props.dataRef;
                } else {
                    this.operateItem = null;
                }
                //trigger expandedKeys;
                const key = e.node.dataRef.id;
                if (key) {
                    const index = this.expandedKeys.indexOf(key);
                    if (index === -1) {
                        this.expandedKeys.push(key);
                    } else if (!e.selected) {
                        this.expandedKeys.splice(index, 1);
                    }
                }

            },
            addFileClassify() {
                let arr;
                let parentId;
                if (this.operateItem) {
                    if (!this.operateItem.crdFileBliList) {
                        this.$set(this.operateItem, 'crdFileBliList', []);
                    }
                    arr = this.operateItem.crdFileBliList;
                    parentId = this.operateItem.id;
                } else {
                    arr = this.treeData;
                }
                arr.push({
                    fileName: '新建分类',
                    isNew: true,
                    isEdit: false,
                    parentId,
                });
            },
            //查询文件分类
            async queryFileClassify() {
                this.loading = true;
                const params = {fileGroupType: 0};
                const res = await getAction('filebank/api/queryFileGroupAndFolder', params);
                if (res && res.success) {
                    //找到原来选中的数据
                    if (this.operateItem) {
                        this.operateItem = this.findOperateItem(this.operateItem.id, res.result);
                    }
                    if (!this.operateItem) {
                        this.selectedKeys = [];
                    }
                    this.loading = false;
                    this.treeData = res.result;
                }
            },
            findOperateItem(key, list) {
                for (let i = 0; i < list.length; i++) {
                    const item = list[i];
                    if (item.id == key) {
                        return item;
                    } else if (item.crdFileBliList) {
                        const res = this.findOperateItem(key, item.crdFileBliList);
                        if (res) {
                            return res;
                        }
                    }
                }
            },
            async update(item) {
                let res;
                //添加分类
                if (item.isNew) {
                    res = await postAction('filebank/api/addGroup', {
                        fileName: item.dataRef.fileName,
                        parentId: item.dataRef.parentId
                    });
                } else {
                    //修改分类
                    res = await postAction('filebank/api/editGroup', {
                        id: item.dataRef.id,
                        fileName: item.dataRef.fileName
                    });
                }
                //重新查询数据
                if (res && res.success) {
                    this.changed = true;
                    this.queryFileClassify();
                } else {
                    this.$message.warning(res.message);
                }
            },
            cancel(item) {
                if (item.isNew) {
                    //删除item
                    const arr = (this.operateItem && this.operateItem.crdFileBliList) || this.treeData;
                    arr.pop();
                } else {
                    //恢复原来的title
                    item.dataRef.originFileName = null;
                    item.dataRef.fileName = item.originFileName;
                    item.dataRef.isEdit = false;
                }
            },
            edit(item) {
                item.dataRef.originFileName = item.dataRef.fileName;
                if (item.dataRef.hasOwnProperty('isEdit')) {
                    item.dataRef.isEdit = true;
                } else {
                    this.$set(item.dataRef, 'isEdit', true);
                }

            },
            async deleteItem(item) {
                const res = await postAction('filebank/api/deleteGroup', {id: item.id});
                if (res && res.success) {
                    this.changed = true;
                    this.queryFileClassify();
                }
            },
            handleClose() {
                if (this.changed) {
                    this.changed = false;
                    this.$emit('refresh');
                }
            }
        }
    }
</script>

<style scoped>
    .anticon {
        margin-left: 10px;
        color: @primary-color;
    }

    .icons {
        display: none;
    }

    .item:hover .icons {
        display: unset;
    }

    .footer {
        text-align: left;
    }

</style>
